<template>
    <div id="map" style="width:500px;height:500px"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import {TitleComponent, TooltipComponent, GeoComponent} from 'echarts/components';
import {EffectScatterChart, ScatterChart, MapChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import bd from '@/assets/json/map.json'

echarts.use([
    TitleComponent,
    TooltipComponent,
    EffectScatterChart,
    ScatterChart,
    CanvasRenderer,
    UniversalTransition,
    GeoComponent,
    MapChart
]);
export default {
    name: 'Home',
    data() {
        return {
            option: {},
            img1: require('../assets/images/1.png'),
            img2: require('../assets/images/2.png'),
            img3: require('../assets/images/3.png'),
            img4: require('../assets/images/4.png')
        }
    },
    mounted() {
        // let that = this
        var mapDate = [
            {
                name: '阜平县',
                value: [114.198801, 38.847276],
                datas: 1354,
                img: "image://" + this.img1,
            },
            {
                name: '涞源县',
                value: [114.723966, 39.292095],
                datas: 1402,
                img: "image://" + this.img2,
            },
            {
                name: '易县',
                value: [115.245576, 39.311674],
                datas: 2468,
                img: "image://" + this.img3
            },
            {
                name: '定州市',
                value: [115.050014, 38.460198],
                datas: 768,
                img: "image://" + this.img1,
            },
            {
                name: '曲阳县',
                value: [114.654083, 38.700813],
                datas: 589,
                img: "image://" + this.img2,
            },
            {
                name: '唐县',
                value: [114.798254, 38.898656],
                datas: 1500,
                img: "image://" + this.img3,
            },
        ];
        var domImg = document.createElement('img');
        domImg.style.height = domImg.height = domImg.width = domImg.style.width = '8px';
        domImg =
            '';
        var domImgHover = document.createElement('img');
        domImgHover.style.height = domImgHover.height = domImgHover.width = domImgHover.style.width = '8px';
        domImgHover =
            '';
        var img4 = 'image://' + this.img4;


        echarts.registerMap('bd', bd)
        this.option = {
            backgroundColor: '#2957A2',
            title: {
                top: 20,
                text: '河北省 - 保定市',
                subtext: '',
                x: 'center',
                textStyle: {
                    color: '#fff',
                    fontWeight: 100,
                    fontSize: 14,
                },
            },
            geo: {
                map: 'bd',
                aspectScale: 0.75, //宽高比
                layoutCenter: ['50%', '50.5%'], //位置
                layoutSize: '100%',  //大小
                silent: false,//图形是否不响应和触发鼠标事件，默认为 false
                roam: false, //是否开启鼠标缩放和平移漫游,默认不开启
                z: 0,
                // itemStyle: { //地图区域的多边行样式
                //   areaColor: 'rgba(0, 15, 40, 0.5)',
                //   shadowColor: 'rgba(0, 0, 0, 1)',
                //   shadowBlur: 0,
                //   shadowOffsetX: 0,
                //   shadowOffsetY: 0,
                //   borderColor: 'rgba(0, 0, 0, 0.7)',
                //   borderWidth: 0
                // },
                // emphasis: {
                //   itemStyle: {
                //     areaColor: '#2AB8FF',
                //     borderWidth: 1,
                //     color: 'green',
                //     label: {
                //       show: false,
                //     },
                //   }
                // },
                emphasis: {
                    label: {
                        textStyle: {
                            color: '#fff',
                        },
                    },
                    itemStyle: {
                        areaColor: {
                            image: domImgHover,
                            repeat: 'repeat',
                        },
                        borderColor: '#2ab8ff',
                        borderWidth: 1,
                        shadowColor: 'rgba(0, 255, 255, 0.7)',
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 1,
                        label: {
                            show: false,
                        },
                    }
                },
                itemStyle: {
                    borderColor: '#2ab8ff',
                    borderWidth: 1,
                    areaColor: {
                        image: domImg,
                        repeat: 'repeat',
                    },
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 1,
                },
            },
            series: [
                // {
                //   type: 'map',
                //   label: {
                //     show: false,
                //     textStyle: {
                //       color: '#fff',
                //     },
                //   },
                //   emphasis: {
                //     label: {
                //       textStyle: {
                //         color: '#fff',
                //       },
                //     },
                //     itemStyle: {
                //       areaColor: {
                //         image: domImgHover,
                //         repeat: 'repeat',
                //       },
                //       borderColor: '#2ab8ff',
                //       borderWidth: 1,
                //       shadowColor: 'rgba(0, 255, 255, 0.7)',
                //       shadowBlur: 10,
                //       shadowOffsetX: 0,
                //       shadowOffsetY: 1,
                //       label: {
                //         show: false,
                //       },
                //     }
                //   },
                //   itemStyle: {
                //     borderColor: '#2ab8ff',
                //     borderWidth: 1,
                //     areaColor: {
                //       image: domImg,
                //       repeat: 'repeat',
                //     },
                //     shadowColor: 'rgba(0, 0, 0, 0.5)',
                //     shadowBlur: 0,
                //     shadowOffsetX: 0,
                //     shadowOffsetY: 1,
                //   },
                //   zoom: 1.1,
                //   roam: false,
                //   map: 'bd',
                // },
                {
                    tooltip: {
                        show: false,
                    },
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    rippleEffect: {
                        scale: 10,
                        brushType: 'stroke',
                    },
                    showEffectOn: 'render',
                    itemStyle: {
                        shadowColor: '#0ff',
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        color: function (params) {
                            var colorList = [
                                new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#64fbc5',
                                    },
                                    {
                                        offset: 1,
                                        color: '#018ace',
                                    },
                                ]),
                                new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#64fbc5',
                                    },
                                    {
                                        offset: 1,
                                        color: '#018ace',
                                    },
                                ]),
                                new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#168e6d',
                                    },
                                    {
                                        offset: 1,
                                        color: '#c78d7b',
                                    },
                                ]),
                                new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#61c0f1',
                                    },
                                    {
                                        offset: 1,
                                        color: '#6f2eb6',
                                    },
                                ]),
                                new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#168e6d',
                                    },
                                    {
                                        offset: 1,
                                        color: '#c78d7b',
                                    },
                                ]),
                                new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                                    {
                                        offset: 0,
                                        color: '#61c0f1',
                                    },
                                    {
                                        offset: 1,
                                        color: '#6f2eb6',
                                    },
                                ]),
                            ];
                            return colorList[params.dataIndex];
                        },
                    },
                    label: {
                        color: '#fff',
                    },
                    symbol: 'circle',
                    symbolSize: [10, 5],
                    data: mapDate,
                    zlevel: 1,
                },
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    itemStyle: {
                        color: '#f00',
                    },
                    symbol: function (value, params) {
                        console.log(params)
                        return params.data.img;
                    },
                    symbolSize: [32, 41],
                    symbolOffset: [0, -20],
                    z: 9999,
                    data: mapDate,
                },
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    label: {
                        normal: {
                            show: true,
                            formatter: function (params) {
                                var name = params.name;
                                var value = params.data.datas;
                                var text = `{fline|${value}}\n{tline|${name}}`;
                                return text;
                            },
                            color: '#fff',
                            rich: {
                                fline: {
                                    padding: [0, 25],
                                    color: '#fff',
                                    textShadowColor: '#030615',
                                    textShadowBlur: '0',
                                    textShadowOffsetX: 1,
                                    textShadowOffsetY: 1,
                                    fontSize: 14,
                                    fontWeight: 400,
                                },
                                tline: {
                                    padding: [0, 27],
                                    color: '#ABF8FF',
                                    fontSize: 12,
                                },
                            },
                        },
                        emphasis: {
                            show: true,
                        },
                    },
                    itemStyle: {
                        color: '#00FFF6',
                    },
                    symbol: img4,
                    symbolSize: [100, 50],
                    symbolOffset: [0, -60],
                    z: 999,
                    data: mapDate,
                },
            ]
        }
        this.initEcharts()
    },
    methods: {
        initEcharts() {
            let myChart = echarts.init(document.getElementById('map'))
            myChart.setOption(this.option)
        }
    }
}
</script>
